<template>
  <div :style="containerStyle">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  width?: string
  borderColor?: string
  padding?: string
  backgroundColor?: string
  flex?: string | null
  height?: string | null
  style?: Record<string, string> | null
}

const props = withDefaults(defineProps<Props>(), {
  borderColor: null,
  padding: 'auto',
  backgroundColor: 'transparent',
  width: '100%',
  flex: null,
  height: null,
  style: null,
})

const parsePadding = (padding: string) => {
  if (typeof padding !== 'string') {
    return {
      paddingLeft: '0',
      paddingRight: '0',
      paddingTop: '0',
      paddingBottom: '0',
    }
  }

  const parts = padding.split(' ').map(part => part.trim())

  switch (parts.length) {
    case 1:
      return {
        paddingLeft: parts[0],
        paddingRight: parts[0],
        paddingTop: parts[0],
        paddingBottom: parts[0],
      }
    case 2:
      return {
        paddingTop: parts[0],
        paddingBottom: parts[0],
        paddingLeft: parts[1],
        paddingRight: parts[1],
      }
    case 3:
      return {
        paddingTop: parts[0],
        paddingLeft: parts[1],
        paddingRight: parts[1],
        paddingBottom: parts[2],
      }
    case 4:
      return {
        paddingTop: parts[0],
        paddingRight: parts[1],
        paddingBottom: parts[2],
        paddingLeft: parts[3],
      }
    default:
      return {
        paddingLeft: '0',
        paddingRight: '0',
        paddingTop: '0',
        paddingBottom: '0',
      }
  }
}

const { paddingLeft, paddingRight, paddingBottom, paddingTop } = parsePadding(
  props.padding
)

const containerStyle = computed(() => ({
  display: 'block',
  position: 'relative',
  boxSizing: 'border-box',
  borderRadius: '4px',
  border: `1px solid ${props.borderColor || props.backgroundColor}`,
  paddingLeft,
  paddingRight,
  paddingBottom,
  paddingTop,
  backgroundColor: props.backgroundColor,
  width: props.width,
  overflow: 'auto',
  height: props.height,
  flex: props.flex,
  ...props.style,
}))
</script>

<style scoped>
/* Add any additional styles here */
</style>
